<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="plantillas/disenio_comun.xhtml">

	<!-- This methods defined in head HTML tag -->
	<ui:define name="head">
	
		<!-- Stylesheets import. 
		<h:outputStylesheet name="home.css" library="css" />
		-->

	</ui:define>

	<ui:define name="contenido">
	
		<h:form id="FormularioRegistrarCronograma">
		<p:growl id="growl" showDetail="true" />
			<div>			
				<table border="0" cellpadding="5" cellspacing="0"  bgcolor="#EEEEEE">
					
					<tr>				 
				    	<td colspan="4" align="center">
				    		<h2 align="center"><h:outputText value="Registrar Cronograma de Talleres"/></h2>
				    		<center>(El estado del cronograma luego de su registro es pendiente de aprobacion.)</center>
				    	</td>
					</tr>
					<p:messages  id="response" globalOnly="true" showDetail="true" autoUpdate="false" closable="true" />
										
				  	<tr>
				    	<td colspan="3" align="center">		
				    		
				        				<p:dataTable id="tablaTalleres" var="taller" 
									    		value="#{controladorCronograma.talleres}"						    		
									    		paginator="true" rows="5"  
			                					paginatorTemplate="{FirstPageLink} {PageLinks} {LastPageLink}"
			                					widgetVar="tablaTaller"   
									            emptyMessage="Ningún taller se encontro con con el criterio dado"
									            tableStyle="width:700px;font-size: 90%" >  
									  				
									  		<f:facet name="header">  
										        Talleres disponibles
										    </f:facet>
										    
										     <p:column id="columnaNombreTaller" filterBy="#{taller.nombre}"   
									        		sortBy="#{taller.nombre}"
									                headerText="Nombre" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.codigo} - #{taller.nombre}" />
									            <p:watermark forElement="FormularioRegistrarCronograma:tablaTalleres:columnaNombreTaller" value="Buscar..." />  
									        </p:column> 
									          <p:column id="columnaNombreUnidad" filterBy="#{taller.nombre_unidad}"   
									        		sortBy="#{taller.nombre_unidad}"
									                headerText="Unidad Ejecutora" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.nombre_unidad}" />
									            <p:watermark forElement="FormularioRegistrarCronograma:tablaTalleres:columnaNombreUnidad" value="Buscar..." />  
									        </p:column> 
									        <p:column id="columnaFechaInicio" filterBy="#{taller.strFechaInicio}"   
									        		sortBy="#{taller.strFechaInicio}"
									                headerText="Fecha de Inicio" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.strFechaInicio}" />
									            <p:watermark forElement="FormularioRegistrarCronograma:tablaTalleres:columnaFechaInicio" value="Buscar..." />  
									        </p:column> 
									         <p:column id="columnaFechaFin" filterBy="#{taller.strFechaFin}"   
									        		sortBy="#{taller.strFechaFin}"
									                headerText="Fecha de Fin" filterMatchMode="contains" style="text-align:left">						             
									            <h:outputText value="#{taller.strFechaFin}" />
									            <p:watermark forElement="FormularioRegistrarCronograma:tablaTalleres:columnaFechaFin" value="Buscar..." />  
									        </p:column> 
									        <p:column headerText="" style="width:10px">  
								                 <p:commandButton id="seleccionar" update=":FormularioRegistrarCronograma:tablaDatosTaller" icon="ui-icon-search" style="font-size: 80%" title="Seleccionar el taller">  
								                     <f:setPropertyActionListener value="#{taller}" target="#{controladorCronograma.tallerSeleccionado}" />  
								                 </p:commandButton>
								             
									        </p:column> 

									    </p:dataTable>
								
						</td>
						<td style="vertical-align:text-top;">
											<p:panelGrid id="tablaDatosTaller" columns="3" style="text-align:left;font-size: 90%"  >											
											<f:facet name="header">  
										        Datos del Taller Seleccionado
										    </f:facet>
										    
										    <h:outputLabel for="codigoTaller" value="Código:" />
										    <p:inputText id="codTaller" value="#{controladorCronograma.tallerSelected.codigo}" readonly="true" size="10" />											    
							    			<h:outputText value=" "/>
							    			
							    			<h:outputLabel for="nombreTaller" value="Nombre:" />
							    			<p:inputText id="nombreTaller" value="#{controladorCronograma.tallerSelected.nombre}" readonly="true" size="50"/>	
							    			<h:outputText value=" "/>
							    								    			
										 	<h:outputLabel for="FechaInicio" value="Fecha Inicio Taller:" />
										    <p:calendar id="popupFechaInicio" value="#{controladorCronograma.fechaInicio}"  showOn="button" 
										    	pattern="dd/MM/yyyy" />
										     <p:message for="popupFechaInicio" />  	 
										    	
										    <h:outputLabel for="FechaFin" value="Fecha Fin Taller:" />
										    <p:calendar id="popupFechaFin" value="#{controladorCronograma.fechaFin}"  showOn="button" 
										    	pattern="dd/MM/yyyy"  /> 
										    <p:message for="popupFechaFin"  />  	
							
											<f:facet name="footer">
																		            	
								            	<p:commandButton  
								            	update="FormularioRegistrarCronograma:,FormularioRegistrarCronograma:imageCronograma,FormularioRegistrarCronograma:tablaDatosTaller" 
								            	value="Guardar" icon="ui-icon-check" actionListener="#{controladorCronograma.modificarFechasTaller}" title="Registrar Fechas de taller."/>
								            	<h:outputText value=" "/>
								            	  							
			    							</f:facet> 
										 
							    			
							    			</p:panelGrid>
						</td>
				  	</tr>
				  
					<tr>
					  	<td colspan="4" align="center">
					  		<p:outputPanel id="imageCronograma">
					  		<p:graphicImage value="#{controladorCronograma.chart}" >
					  			 <f:param name="aaa" value="#{controladorCronograma.date}"/>
					  		</p:graphicImage>
					  		</p:outputPanel>
					  	
					  		
					  	</td>
					</tr>
				</table>
			</div>
			
			
    
		</h:form>
		
		

	</ui:define>
</ui:composition>